<style lang="scss">
  @import "~common/style/common";
  #main {
    position: relative;
    background-color: #d0d1d5;
  }
  .marquee-box-wrapper {
    height: $marquee-box-height;
  }

  .floating-guide {
    position: fixed;
    overflow: hidden;
    bottom: 0;
    z-index: 9;
    background-color: rgba(41, 96, 147, 0.8);
    width: 100%;
    height: 1.8rem;
    color: #ffffff;
    padding: 0 0.4rem;
    box-sizing: border-box;
    p {
      line-height: 1.4;
      padding: 0;
      margin: 0;
    }
    .logo {
      width: 1.32rem;
      height: 1.32rem;
      margin-right: 0.22rem;
      margin-top: 0.24rem;
    }
    .desc {
      margin-top: 0.42rem;
    }
    .logo, .desc, .btn {
      display: inline-block;
    }
    .logo, .desc {
      float: left;
    }
    .btn {
      width: 3rem;
      height: 1rem;
      float: right;
      margin-top: 0.4rem;
    }
  }
  .body {
    position: relative;
    min-height: 100vh;
    background: url('~pages/app/assets/images/background.jpg') no-repeat;
    background-size: cover;
    opacity: 1;
    transition: opacity 300ms ease;
    &.loading {
      opacity: 0;
    }
  }
  .press-wrapper {
    position: relative;
    font-size: 0;
    white-space: nowrap;
    img {
      display: inline-block;
    }
    &.press {
      left: -100%;
    }
  }
  .lottery {
    padding: .85rem .28rem .85rem;
    .box {
      box-sizing: border-box;
      padding: 0.3rem 0;
      margin-bottom: 1.65rem;
      text-align: center;
      border-radius: 0.16rem;
      background: url("~pages/app/assets/images/bg-red.png")  no-repeat top left;
      background-size: cover;
      .row {
        &:not(:last-child) {
          margin-bottom: 0.12rem;
        }
      }
      .cell {
        display: inline-block;
        width: 30%;
        position: relative;
        overflow: hidden;
        img {
          border-radius: 0.16rem;
        }
        a {
          position: relative;
          top: 0.1rem;
        }
        &:not(:last-child) {
          margin-right: 0.12rem;
        }
      }
    }
  }
  .snh48-game-rules {
    position: relative;
    margin-top: 3.57rem;
  }
  .snh48-game-info {
    padding-top: .1rem;
    font-size: .36rem;
    text-align: center;
    color: #fff;
    p {
      line-height: 1.56;
      padding: 0;
      margin: 0;
    }
  }
</style>

<template>
  <div id="main">
    <modal :closable="modal.closable" :visible="modal.visible" @close="closeModal">
      <keep-alive>
        <component :is="modal.view" :data="modal.data"
          @friend-bigo-ok="closeModal">
        </component>
      </keep-alive>
    </modal>
    <div class="body">
      <!-- 中奖名单跑马灯 -->
      <div class="marquee-box-wrapper">
        <marquee-box v-if="winnerslog.length > 0">
          <marquee v-for="log in winnerslog">{{ log | phone }}</marquee>
        </marquee-box>
      </div> 
      <div class="snh48-game-rules">
        <div class="snh48-game-info">
          <p>抽奖活动持续时间：11月3号-11月5号</p>
          <p>VR直播时间：11月5号18:30准时开启</p>
        </div>
      </div> 
      <!-- 抽奖转盘 -->
      <div class="lottery">
        <div class="box">
          <div class="row">
            <div class="cell">
              <div >
                <img src="~pages/app/assets/images/raffle/princess-cloak-normal.png">
              </div>
            </div>
            <div class="cell">
              <div >
                <img src="~pages/app/assets/images/raffle/princess-normal.png">
              </div>
            </div>
            <div class="cell">
              <div >
                <img src="~pages/app/assets/images/raffle/limit-whaleyvr-normal.png">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="cell">
              <div >
                <img src="~pages/app/assets/images/raffle/sticks-normal.png">
              </div>              
            </div>
            <div class="cell">
              <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054"  onclick="_hmt.push(['_trackEvent', 'downloadApp', 'click', 'download APP'])">
                <img src="~pages/app/assets/images/share/btn-download-disabled.png">
              </a>
            </div>
            <div class="cell">
              <div >
                <img src="~pages/app/assets/images/raffle/standard-normal.png">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="cell">
              <div >
                <img src="~pages/app/assets/images/raffle/photo-normal.png">
              </div>
            </div>
            <div class="cell">
              <div >
                <img src="~pages/app/assets/images/raffle/tickets-bag-normal.png">
              </div>
            </div>
            <div class="cell">
              <div >
                <img src="~pages/app/assets/images/raffle/tks-normal.png">
              </div>
            </div>
          </div>
        </div>
      </div>    
    </div>
    <!-- 悬浮框 -->
    <div class="floating-guide">
      <i class="logo">
        <img src="~pages/share/assets/images/logo.png">
      </i>
      <div class="desc">
        <p>前往活动页面</p>
        <p>抽取SNH48限量周边</p>
      </div>
      <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="btn" onclick="_hmt.push(['_trackEvent', 'downloadApp', 'click', 'download APP'])">
        <img src="~pages/share/assets/images/btn-go-to-lottery-floating.png">
      </a>
    </div>
  </div>
</template>

<script>
  import { MarqueeBox, Marquee } from 'components/marquee';
  import Modal from 'components/modal';
  import FriendBigo from 'pages/share/friend-bigo';
  import Promise from 'bluebird';
  import lotteryService from 'services/lottery';

  export default {
    components: { MarqueeBox, Marquee, Modal, FriendBigo },
    props: {
      bigo: {
        type: Boolean,
        required: true
      }
    },
    methods: {
      openModal(view, data = {}, options = { closable: true }) {
        this.modal.view = view;
        this.modal.visible = true;
        this.modal.data = data;
        this.modal.closable = options.closable;
      },
      closeModal() {
        this.modal.visible = false;
      },
    },
    mounted() {
      if (this.bigo) {
        this.openModal('friend-bigo', null, { closable: false });
      }
      lotteryService.getWinnerslog().then( (winnerslog) => {
        if (winnerslog.length > 0) {
          this.winnerslog = winnerslog;
        }
      });
    },
    filters: {
      phone(v) {
        if (v) {
          return v.replace(/(\d{3})(?:\d{4})(\d{4})/, '$1****$2');
        }
        return '';
      }
    },
    data() {
      return {
        modal: {
          visible: false,
          view: '',
          closable: true,
          data: {}
        },
        // 已中奖用户列表
        winnerslog: [],
      };
    }
  }
</script>
